<template>
  <div class="Home">
    <video class="video" auto playsinline ref="video"></video>
    <div class="show-video" @click="handleStart">Start</div>
    <div class="btn switch" @click="handleSwitch">前</div>
    <div class="close btn" @click="handleClose">关</div>
  </div>
</template>

<script>
// import io from 'socket.io-client';

export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      isFront: false,
      videoTrack: null,
      socket: null
    };
  },
  async mounted() {
    // this.socket = io('http://10.255.74.163:3000');
    // this.socket.on('connect', function () {
    //   console.log('连接成功');
    // });
    // this.socket.on('event', function (data) {
    //   console.log(data);
    // });
    // this.socket.on('disconnect', function () {
    //   console.log('连接关闭');
    // });
    // this.socket.emit('room', {
    //   roomId: 9999,
    //   userName: '洞洞',
    //   userType: 1
    // })
    if (!navigator.mediaDevices) {
      console.log('不支持此功能');
      return;
    }
    console.log(await navigator.mediaDevices.enumerateDevices());
  },
  methods: {
    handleClose() {
      if (this.videoTrack) {
        this.videoTrack.stop();
      }
    },
    handleSwitch() {
      if (this.videoTrack) {
        this.videoTrack.stop();
      }
      this.isFront = !this.isFront;
      this.handleStart();
    },
    async handleStart() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            facingMode: 'environment'
            // facingMode: this.isFront ? 'user' : 'environment', //  摄像头
            // frameRate: { ideal: 10, max: 15 } // 帧率
          }
        });
        this.handleGetVideo(stream);
      } catch (error) {
        // eslint-disable-next-line no-alert
        alert('获取失败');
        console.dir(error);
      }
    },
    handleGetVideo(stream) {
      // console.log(stream);
      const { video } = this.$refs;
      // eslint-disable-next-line prefer-destructuring
      this.videoTrack = stream.getTracks()[0];
      const videoTracks = stream.getVideoTracks();
      console.log(`Using video device: ${videoTracks[0].label}`);
      window.stream = stream; // make variable available to browser console
      console.log(stream);
      video.srcObject = stream;
      // eslint-disable-next-line func-names
      video.onloadedmetadata = function () {
        video.play();
      };
    }
  },
  watch: {
  },
  computed: {
  }
};
</script>

<style lang="less">
.Home {
  width: 100%;
  height: 100%;
}
.video {
  width: 100%;
  height: 100%;
  background: #000;
  transform: rotateY(180deg);
}
.show-video {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 50px;
  padding: 0 30px;
  line-height: 34px;
  height: 34px;
  font-size: 14px;
  &:active {
    background: #f7f7f7;
  }
}
.btn {
  position: absolute;
  &.switch {
    bottom: 15px;
    right: 20%;
  }
  &.close {
    bottom: 15px;
    left: 20%;
  }
  background: #fff;
  border-radius: 50px;
  width: 34px;
  height: 34px;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  &:active {
    background: #f7f7f7;
  }
}
</style>
